<template>
  <div class="topic" @click="djdl()">
    <h1 :class="[info.caption !== '' ? 'line-split' : '']">{{info.title}}</h1>
    <p>{{info.caption}}</p>
    <div v-if="info.link">
      <a v-if="info.show" :href="info.outLink"><img src="../assets/img/jump.png"></a>
    </div>
    <div v-else>
      <span v-if="info.show"><router-link :to="info.inLink"><img src="../assets/img/jump.png"></router-link></span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'topic',
    props: ['info'],
    data () {
      return {
      }
    },
    methods: {
      djdl () {
        if (this.info.title === '独家代理') {
          location.href = 'http://www.finewest.cn/brand.htm'
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  $topic_back_color: #ffffff;
  .topic{
    height: 37px;
    background-color: $topic_back_color;
    width: 100%;
    line-height: 37px;
    overflow:hidden;
    border-bottom: 1px solid #f5f5f5;
    h1{
      font-size: 14px;
      color: #e92d46;
      float: left;
      position:relative;
      margin-left: 11px;
      &.line-split:after{
        content: '';
        position: absolute;
        width: 1px;
        height: 18px;
        right: -12px;
        top: 9.5px;
        background-color: #bbbbbb;
      }
    }
    p{
      color: #000000;
      font-size: 9px;
      float: left;
      margin-left: 23px;
      line-height: 39px;
    }
    a{
      position: absolute;
      right: 0;
      img{
        display: inherit;
        width: 37px;
        height: 37px;
      }
    }
    span{
      position: absolute;
      right: 0;
      img{
        display: inherit;
        width: 37px;
        height: 37px;
      }
    }
  }
</style>
